<template>
  <div style="width:1074px;margin: auto;" id="pdfDom1s">
    <div id="basic" style="margin: auto">
        <div style="">
          <div style=" width: 100%; background-color:#FF5C82;  text-align: center; margin:auto">
          <div style="font-size: 40px; font-weight: bold; color: #ffffff;padding-top:20px;">{{ Titlename }}</div>
          <!-- <span style="font-size: 30px; color: #666666; margin-left: 20px;display: block;">基本信息报告</span> -->
          <div style="margin-top:30px;font-size: 24px;padding-bottom: 20px;font-weight: bold;color:#333333;">孕妇{{diseases>1?'多疾病':diseasess}}一日三餐膳食推荐</div>
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 40px; background-color: #FF5C82; margin-top: 10px; display: flex;">
           <div><img src="../assets/img/12.jpg" style="height: 40px" alt="" /></div>
           <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">孕妇基本信息</div>
        </div>
        <div style="width: 1070px; border-top: 2px solid #FF5C82; border-right: 2px solid #FF5C82;  margin-top: 10px">
            <div style="display: flex">
              <div
                style="background-color: #FF5C82; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                检测日期</div>
              <div
                style="width: 90%; height: 40px; border-bottom: 2px solid #FF5C82; line-height: 40px; text-indent: 20px;">
                {{ report_time }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                孕妇姓名
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                {{ contents.username ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                手机号
              </div>
              <div
                style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                {{ contents.guardian_mobile  ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                年龄
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                {{ contents.age ?? '[]' }}岁
              </div>
              <div
                style=" background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                身高
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
                {{ contents.height ?? '[]' }}CM
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                体重
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.weight ?? '[]' }}KG
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                孕周数
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.gestational_weeks ?? '[]' }}周
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                末次月经
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.pre_weight ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                预产期
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
                {{ contents.edc ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                多胎
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.twin ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                腹围
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px;  border-bottom: 2px solid #FF5C82; ">
                {{ contents.abdominal_girth ?? '[]' }}
              </div>
              <div
                style="width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-bottom: 2px solid #FF5C82;">
              
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-bottom: 2px solid #FF5C82; ">
               
              </div>
              <div
                style="width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-bottom: 2px solid #FF5C82;">
              
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
               
              </div>
            </div>
           
          </div>
      <div style="margin-top: 20px;border:2px solid #FF5C82;display: flex;">
        <div class="plates">
          <div class="time-type time-left-color">早餐</div>
          <div class="der">
            <div style="margin-left: 6%; padding-top: 6%">
              <span
                class="plates-top-img"
                v-for="breakfast in Opinion_1"
                :key="breakfast"
                ><img
                  :src="'http://' + baseUrl + '/' + breakfast.meal_image"
                  alt=""
                  style="width: 100px; height: 100px"
              /></span>
              <span
                class="plates-top-img"
                v-for="earlier in Opinion_2"
                :key="earlier"
                ><img
                  :src="'http://' + baseUrl + '/' + earlier.meal_image"
                  alt=""
                  style="width: 100px; height: 100px"
              /></span>
            </div>
          </div>
          <div class="platesFoods">
            <div>
              早餐7:00:
              <span v-for="breakfast in Opinion_1" :key="breakfast"
                ><o class="foodsNames">{{ breakfast.food_name }}</o> 重量:{{
                  breakfast.weight
                }}g;
              </span>
            </div>
            <div>
              早点10:00:
              <span v-for="earlier in Opinion_2" :key="earlier"
                ><o class="foodsNames">{{ earlier.food_name }}</o> 重量:{{
                  earlier.weight
                }}g;
              </span>
            </div>
          </div>
        </div>

        <div class="plates">
          <div class="time-type time-common-color">午餐</div>
          <div class="der">
            <div style="margin-left: 6%; padding-top: 6%">
              <span
                class="plates-top-img"
                v-for="lunch in Opinion_3"
                :key="lunch"
                ><img
                  :src="'http://' + baseUrl + '/' + lunch.meal_image"
                  alt=""
                  style="width: 100px; height: 100px"
              /></span>
              <span class="plates-top-img" v-for="noon in Opinion_4" :key="noon"
                ><img
                  :src="'http://' + baseUrl + '/' + noon.meal_image"
                  alt=""
                  style="width: 100px; height: 100px"
              /></span>
            </div>
          </div>

          <div class="platesFoods">
            <div>
              午餐12:00:
              <span v-for="lunch in Opinion_3" :key="lunch"
                ><o class="foodsNames">{{ lunch.food_name }}</o> 重量:{{
                  lunch.weight
                }}g;
              </span>
            </div>
            <div>
              午点15:00:
              <span v-for="noon in Opinion_4" :key="noon"
                ><o class="foodsNames">{{ noon.food_name }}</o> 重量:{{
                  noon.weight
                }}g;
              </span>
            </div>
          </div>
        </div>

        <div class="plates">
          <div class="time-type time-right-color">晚餐</div>
          <div class="der">
            <div style="margin-left: 6%; padding-top: 6%">
              <span
                class="plates-top-img"
                v-for="dinner in Opinion_5"
                :key="dinner"
                ><img
                  :src="'http://' + baseUrl + '/' + dinner.meal_image"
                  alt=""
                  style="width: 100px; height: 100px"
              /></span>
              <span class="plates-top-img" v-for="late in Opinion_6" :key="late"
                ><img
                  :src="'http://' + baseUrl + '/' + late.meal_image"
                  alt=""
                  style="width: 100px; height: 100px"
              /></span>
            </div>
          </div>

          <div class="platesFoods">
            <div>
              晚餐18:00:
              <span v-for="dinner in Opinion_5" :key="dinner"
                ><o class="foodsNames">{{ dinner.food_name }}</o> 重量:{{
                  dinner.weight
                }}g;
              </span>
            </div>
            <div>
              晚点21:00:
              <span v-for="late in Opinion_6" :key="late"
                ><o class="foodsNames">{{ late.food_name }}</o> 重量:{{
                  late.weight
                }}g;
              </span>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>
  
  <script setup>
import { Edit, CirclePlus, Search, Expand } from "@element-plus/icons-vue";
import { defineComponent, onMounted, ref, watch, reactive } from "vue";
import Header from "./common/Header.vue";
import ChildLeft from "./common/GravidaLeft.vue";
import { useRoute, useRouter } from "vue-router";
import http, { baseUrl } from "../utils/http";
import Drawer from "./common/Drawer.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as api from "../api/loginHttp";
const route = useRoute();
const router = useRouter();
const input_min = ref("");
const input_max = ref("");
const cookbook = ref(false);
const labName = ref();
const options = ref([
  {
    value: "早餐",
    label: "早餐",
  },
  {
    value: "中餐",
    label: "中餐",
  },
  {
    value: "晚餐",
    label: "晚餐",
  },
]);
const Titlename=ref()
const checkList = ref([]);
const tan = ref(true);
const loadings = ref(true);
const list = ref({});
const energy = ref(0);
const energys = ref();
const diseases=ref();
const diseasess=ref();
const OilEnergy = ref(0);
const drawer = ref(false);
const energy_1 = ref();
const energy_2 = ref();
const Opinion_1 = ref();
const Opinion_2 = ref();
const Opinion_3 = ref();
const contents=ref({});
const birth=ref();
const report_time = ref();
const Opinion_4 = ref();
const Opinion_5 = ref();
const Opinion_6 = ref();
const groupId = ref();
const id = ref();
const reportId = ref();
const popWriteDirection = ref("ttb");

const pageList = async () => {
  await router.push({ path: "/pageList/" + groupId.value });
};
const size = ref("150%");

const formInline = ref({
  Fat: "",
  FatMin: "",
  FatMax: "",
  Bone: "",
  BoneMin: "",
  BoneMax: "",
  Protein: "",
  ProteinMin: "",
  ProteinMax: "",
  Water: "",
  WaterMin: "",
  WaterMax: "",
  LBM: "",
  ICW: "",
  Weight: "",
  WeightMin: "",
  WeightMax: "",
  Muscle: "",
  MuscleMin: "",
  MuscleMax: "",
  PBF: "",
  PBFMin: "",
  PBFMax: "",
  SMM: "",
  SMMMin: "",
  SMMMax: "",
  BMI: "",
  BMIMin: "",
  BMIMax: "",
  WHR: "",
  WHRMin: "",
  WHRMax: "",
  Weight_control: "",
  Fat_control: "",
  Muscle_control: "",
  VFI: "",
  VFIMin: "",
  VFIMax: "",
  Edema: "",
  EdemaMin: "",
  EdemaMax: "",
  ECW: "",
  BMR: "",
});

const onHome = async () => {
  await router.push({ path: "/Home" });
};

const onChange = async (index, value) => {
  list._rawValue[index].energy = (
    list._rawValue[index].single.energy * value
  ).toFixed(2);
  list._rawValue[index].weight = (
    list._rawValue[index].single.weight * value
  ).toFixed(2);
  list._rawValue[index].protein = (
    list._rawValue[index].single.protein * value
  ).toFixed(2);
  list._rawValue[index].fat = (
    list._rawValue[index].single.fat * value
  ).toFixed(2);
  list._rawValue[index].carbohydrate = (
    list._rawValue[index].single.carbohydrate * value
  ).toFixed(2);
  list._rawValue[index].calcium = (
    list._rawValue[index].single.calcium * value
  ).toFixed(2);
  list._rawValue[index].sodium = (
    list._rawValue[index].single.sodium * value
  ).toFixed(2);
  list._rawValue[index].magnesium = (
    list._rawValue[index].single.magnesium * value
  ).toFixed(2);
  list._rawValue[index].iron = (
    list._rawValue[index].single.iron * value
  ).toFixed(2);
  list._rawValue[index].zinc = (
    list._rawValue[index].single.zinc * value
  ).toFixed(2);
  list._rawValue[index].selenium = (
    list._rawValue[index].single.selenium * value
  ).toFixed(2);
  list._rawValue[index].vitamin_a = (
    list._rawValue[index].single.vitamin_a * value
  ).toFixed(2);
  list._rawValue[index].vitamin_e = (
    list._rawValue[index].single.vitamin_e * value
  ).toFixed(2);
  list._rawValue[index].vitamin_b1 = (
    list._rawValue[index].single.vitamin_b1 * value
  ).toFixed(2);
  list._rawValue[index].vitamin_b2 = (
    list._rawValue[index].single.vitamin_b2 * value
  ).toFixed(2);
  list._rawValue[index].vitamin_c = (
    list._rawValue[index].single.vitamin_c * value
  ).toFixed(2);

  energys.value = 0;
  for (let i = 0; i < list._rawValue.length; i++) {
    energys.value += list._rawValue[i].energy * 1;
    console.log(list._rawValue[i].energy);
  }
};

const btn_fenxi = async () => {
  let params = {
    id: reportId.value,
    user_id: id.value,
    diet_energy: energy._value,
    diet: list._rawValue,
  };

  const data = await api.diet(params);

  if (data.data.code == 0) {
    ElMessage.error(data.data.msg);
    return false;
  } else {
    const { href } = await router.resolve({
      path: "/Dietary/" + groupId.value + "/" + id.value + "/" + reportId.value,
    });
    window.open(href, "_blank");
  }
};
const prints = async () => {
  const { href } = await router.resolve({
    path: "/Cookbook/" + groupId.value + "/" + id.value + "/" + reportId.value,
  });
  window.open(href, "_blank");
};

const cancelClick = async () => {
  popWrite.value = false;
};

const confirmClick = async () => {
  Object.keys(formInline._rawValue).forEach(function (item, index) {
    //item 就是当日按循环到的对象
    //index是循环的索引，从0开始
    if (formInline._rawValue[item] == "") {
      ElMessage.error("必填项不能为空");
      return;
    }
    // console.log(formInline._rawValue[item]);
  });

  // for(let i = 0; i < Object.keys(formInline._rawValue).length; i++) {
  //   console.log(i);
  //   console.log(formInline._rawValue[i]);
  //   if (formInline.value[i] == '') {
  //     ElMessage.error('必填项不能为空')
  //     return false;
  //   }
  // }
};

const get_new = async () => {
  const res = await api.getFood();
};

// const handClick = async ()  => {
//   console.log('手动输入体成分数据');
// }

const handClick = async () => {
  popWrite.value = true;
};

const appraisal = async () => {
  http
    .get("api/archives/analysis?id=" + id.value + "&type=analysis")
    .then((res) => {
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg);
      }
    });
};

const guanbi = async () => {
  tan.value = false;
  http
    .get("api/archives/analysis?id=" + id.value + "&type=cancel")
    .then((res) => {
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg);
      }
    });
};

const goto = async () => {
  const { href } = await router.resolve({
    path: "/analysis/" + groupId.value + "/" + id.value + "/" + reportId.value,
  });
  window.open(href, "_blank");
};

const btn = async () => {
  // // 只要点击文档，那么就将数据保存起来
  http
    .get("api/archives/setReportStatus?reportId=" + reportId.value)
    .then((res) => {
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg);
        return false;
      }
    });
  const { href } = await router.resolve({
    path:
      "/reportView/" + groupId.value + "/" + id.value + "/" + reportId.value,
  });
  window.open(href, "_blank");
};

const fetchData = async () => {
  if (route.params.groupId) {
    groupId.value = route.params.groupId;
    id.value = route.params.id;
    reportId.value = route.params.reportId;
    if (groupId.value == 3) {
      labName.value = "婴幼儿营养测评";
    } else if (groupId.value == 5) {
      labName.value = "孕产妇营养测评";
    } else if (groupId.value == 6) {
      labName.value = "成年人营养测评";
    } else if (groupId.value == 7) {
      labName.value = "慢性病营养测评";
    } else if (groupId.value == 8) {
      labName.value = "团体营养测评";
    }
    http.get( "api/archives/viewReportMember?id=" + reportId.value +"&username=" +'' +"&guardian=" +'' +"&birth=" + '').then((res) => {
            if (res.data.code === 0) {
            ElMessage.error(res.data.msg);
            }
            report_time.value = res.data.data.times;
            contents.value = res.data.data.contents;
            birth.value = res.data.data.contents.birth; 
            diseases.value=res.data.data.contents.pregnancy_value.length;
            diseasess.value=res.data.data.contents.pregnancy_value[0];

      });




     Titlename.value=localStorage.getItem('Title');
    const res = await api.getonediet({id: route.params.reportId});
    if(res.data.code==1){
      Opinion_1.value = res.data.data.早餐;
      Opinion_2.value = res.data.data.早点;
      Opinion_3.value = res.data.data.午餐;
      Opinion_4.value = res.data.data.午点;
      Opinion_5.value = res.data.data.晚餐;
      Opinion_6.value = res.data.data.晚点;
    }
   
    setTimeout(() => {
          print("pdfDom1s");
        }, 2000);
        console.log('ad')
    let ws = new WebSocket("ws://" + baseUrl + ":1234");
    ws.onopen = function () {
      let uid = window.localStorage.getItem("MemberId");
      ws.send(uid);
    };
    ws.onmessage = function (e) {
      loadings.value = true;
      energy.value = 0;
      let WebList = JSON.parse(e.data);
      for (let i = 0; i < WebList.list.length; i++) {
        WebList.list[i].single = {
          energy: WebList.list[i].energy,
          weight: WebList.list[i].weight,
          protein: WebList.list[i].protein,
          fat: WebList.list[i].fat,
          carbohydrate: WebList.list[i].carbohydrate,
          calcium: WebList.list[i].calcium,
          sodium: WebList.list[i].sodium,
          magnesium: WebList.list[i].magnesium,
          iron: WebList.list[i].iron,
          zinc: WebList.list[i].zinc,
          selenium: WebList.list[i].selenium,
          vitamin_a: WebList.list[i].vitamin_a,
          vitamin_e: WebList.list[i].vitamin_e,
          vitamin_b1: WebList.list[i].vitamin_b1,
          vitamin_b2: WebList.list[i].vitamin_b2,
          vitamin_c: WebList.list[i].vitamin_c,
          checkList: [],
        };
        energy.value = energy.value + Number(WebList.list[i].energy);
        energys.value = energy.value.toFixed(2);
      }

      list.value = WebList.list;
      list.value.map((item, index) => {
        console.log(item);
      });

      setTimeout(() => {
        loadings.value = false;
      }, 1000);
    };
  } else {
    ElMessage.error("栏目编号不得为空");
    await router.push({ path: "/Home" });
  }
};

onMounted(() => {
  fetchData();
});
</script>
  
  <style scoped>
@import "../assets/css/common.css";
@media screen and (max-width: 1920px) {
  .right-box-card .all button {
    width: 85px;
    margin-right: 14px;
  }
  .el-drawer__body .drVal {
    padding-top: 50px;
  }
}
.dietOn {
  height: 500px;
}
.time-botton {
  background-color: #FF5C82;
  width: 108px;
  height: 41px;
  color: #fff;
  font-size: 16px;
  border-radius: 100px;
  line-height: 41px;
  margin: 40px 0 0 40px;
  text-align: center;
}
.plates {
  width: 33%;
  float: left;
}

.time-type {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #85ce61;
  border-radius: 50%;
  opacity: 1;
  color: #fff;
  box-shadow: 5px 5px 2px #888888;
  margin: 20px 0 20px 40%;
}
.time-left-color {
  background: #85ce61;
}
.time-common-color {
    background: #E8B973;
  }
  
  .time-right-color {
    background: #6EA9E0;
  }
.der {
  width: 354px;
  height: 241px;
  background: url("../assets/img/evaluaction_service_plate.png") 100% 100%;
}
.plates .plates-top-img {
  float: left;
  margin-left: 1%;
}
.platesFoods {
  margin-top: 5px;
  margin-left: 8px;

  color: #333333;
  font-size: 16px;
}
.platesFoods div {
  padding-bottom: 18px;
}
.platesFoods span {
  color: #666666;
}
.foodsNames {
  color: red;
}

.BMIprimary {
  width: 268px;
  height: 70px;
  background: #FF5C82;
  opacity: 1;
  border-radius: 8px;
  font-size: 24px;
}
.BMIDefault {
  width: 268px;
  height: 70px;
  background: #fff;
  opacity: 1;
  color: #FF5C82;
  border-radius: 8px;
  font-size: 24px;
  border: 1px solid #FF5C82;
}
.el-drawer__body {
  overflow: auto;
}
.el-drawer__container ::-webkit-scrollbar {
  display: none;
}

::v-deep .el-button:focus,
.el-button:hover {
  background: #FF5C82;
  color: #fff;
}
::v-deep .el-progress-bar__inner {
  background: #FF5C82;
}
</style>
  <style>
.right-box-card {
  margin-left: 2%;
  margin-top: 1%;
  position: static;
  top: calc(260px);
  width: 60%;
  float: left;
}

.right-box-card .all span {
  margin-right: 5px;
  font-size: 14px;
}

.right-box-card .all .num1 {
  width: 100px;
  border: none;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #3ea4aa;
}
.num {
  width: 62px;
  border: none;
  text-align: center;
  background: #fff;
}

.right-box-card .all button {
  display: inline-block;
  width: 96px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #3ea4aa;
  border-radius: 3px;
  color: #ffffff;
  font-size: 16px;
  float: right;
  margin-right: 40px;
  margin-top: 70px;
  border: none;
}
</style>
  